<template>
  <div :id="id" class="product-module app-container" :style="{'margin-bottom': marginBottom+'px'}">
    <slot name="title"></slot>
    <div class="product-module-content" :style="[
        {'gap': `${gap[0]} ${gap[1]}`}
    ]">
      <template v-for="(item, index) in lists" :key="index">
        <product-item :item="item" />
      </template>
    </div>
<!--    <slot name="pagination">-->
<!--      <common-pagination :page="1" />-->
<!--    </slot>-->
  </div>
</template>
<script setup>
import ProductItem from "@/components/common/ProductItem.vue";
import CommonPagination from "@/components/common/CommonPagination.vue";
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  lists: {
    type: Array,
    default: () => {
      return []
    }
  },
  length: {
    type: Number,
    default: 24
  },
  marginBottom: {
    type: Number,
    default: 0
  },
  gap: {
    type: Array,
    default: () => {
      return ['20px', '14px']
    }
  }
})
</script>
<style scoped>
.product-module{
  --color-main: #002FFF;
  --color-submain: #0023BD;
  --hover-color: #0023BD;
  --background: #fff;
  --bg-border-color: #0023BD;
  --active-button: #0023BD;
  --color-footer: #F78F22;
  --disabled-button: #5974ED;
}
.product-module-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 165px));
  gap: 20px 14px;
  align-content: center;
}
</style>